<template>
	<view class="wrapper">
		<view class="noCommodity" v-if="datalist.length==0">
			<uni-icons type="shop" size="60" color='#ccc'></uni-icons>
			<p>您还没有添加商品哦~</p>
			<div class="gohome" @tap="gohome">去逛逛</div>
		</view>
		<checkbox-group @change="checkboxChange" v-model="selectedItems" class="shop-list">
			<div class="shop-item" v-for="(item, index) in datalist" :key="index">
				<label>
					<view>
						<checkbox :value="item.id" style="transform:scale(0.7)" />
					</view>
				</label>
				<image class="pop-img" :src="item.imgUrl" @tap="goDetail(item.id)"></image>
				<div class="info">
					<div class="top">
						<div class="name" @tap="goDetail(item.id)">{{item.name}}</div>
						<div class="del" @click="removeItem(item.id)">删除</div>
					</div>
					<div class="bottom">
						<div class="price" @tap="goDetail(item.id)">
							<text class="pprice">{{item.pprice}}</text>
						</div>
						<UniNumberBox :min="UniNumberBoxMin" class="numbox" v-model="item.numboxValue"
							@change="handleChange(item.id, $event)"></UniNumberBox>
					</div>
				</div>
			</div>
		</checkbox-group>
		<div class="Count-money">
			<div class="money">
				<text>合计：</text>
				<text class="price">&yen;{{price.toFixed(2)}}</text>
			</div>
			<button>去结算</button>
		</div>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" content="确认要删除该商品吗?"
					@confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import UniNumberBox from '@/components/uni_assets/uni-number-box/uni-number-box.vue'
	export default {
		data() {
			return {
				selectedItems: [],
				price: 0,
				// 改为从localstroage获取datalist
				datalist: [],
				UniNumberBoxMin: 1,
				numboxValue: 1,
				currDelID: -1
			}
		},
		onLoad() {
			this.datalist = getApp().globalData.shopcartList;
		},
		methods: {
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				const index = this.datalist.findIndex(item => item.id == this.currDelID)
				this.datalist.splice(index, 1)
				this.calAmount();
			},
			// 删除逻辑
			removeItem(id) {
				this.dialogToggle('warn')
				this.currDelID = id
			},
			// 结算计价逻辑
			calAmount() {
				this.price = 0;
				const mergedArray = this.datalist.filter(item => this.selectedItems.includes(item.id));
				mergedArray.forEach(item => {
					const numericPart = item.pprice.match(/\d+(\.\d+)?/);
					const numericValue = numericPart ? parseFloat(numericPart[0]) : NaN;
					this.price += numericValue * item.numboxValue
				})
			},
			// 监听是否选中
			checkboxChange(e) {
				this.selectedItems = e.detail.value.map(str => parseInt(str, 10));
				this.calAmount();
			},
			//监听加减购
			handleChange(itemId, quantity) {
				const index = this.datalist.findIndex(item => item.id == itemId);
				if (index != -1) {
					this.datalist[index].numboxValue = quantity;
					getApp().globalData.shopcartList[index].numboxValue = quantity;
				}
				this.calAmount();
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			},
			gohome() {
				uni.switchTab({
					url: `/pages/index/index`
				})
			}
		},
		components: {
			UniNumberBox
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.noCommodity {
		position: absolute;
		width: 400rpx;
		height: 300rpx;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #ccc;

		.gohome {
			border: 1px solid #17D46B;
			border-radius: 40rpx;
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 30rpx auto 0;
			color: #17D46B;
			font-weight: bold;
		}
	}

	.shop-list {
		flex: 1;
		background-color: #eee;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.shop-item {
			width: 90%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			display: flex;
			justify-content: left;
			align-items: center;
			font-size: 28rpx;
			margin-bottom: 30rpx;

			.pop-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
				box-shadow: 4rpx 4rpx 16rpx #999;
			}

			.info {
				height: 200rpx;
				// background-color: #eee;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.top {
					display: flex;
					justify-content: space-between;

					.name {
						font-weight: bold;
						font-size: 32rpx;
					}

					.del {
						background-color: #17D46B;
						color: #Fff;
						border-radius: 5rpx;
						padding: 0 10rpx;
						transform: scale(0.8);
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						.pprice {
							font-size: 32rpx;
							color: #ff3333;
							font-weight: bold;
						}
					}

					.numbox {
						transform: scale(0.7);
					}
				}

			}
		}
	}

	.Count-money {
		height: 100rpx;
		display: flex;
		padding: 15rpx 15rpx 15rpx 0;
		align-items: center;

		.money {
			flex: 1;
			margin-left: 20rpx;

			.price {
				color: #ff3333;
			}
		}

		button {
			width: 200rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			background-color: #17D46B;
			color: #Fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>